<!-- add by lty 20181222 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>保洁订购</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/cleanOrder.css">

    <script src="js/jquery/3.2.1/jquery.min.js"></script>
     <!-- 插件js -->
	<script src="../js/zepto.js"></script>
	<script src="../js/sm.js" ></script>
	<script src="../js/sm-extend.js" ></script>
	<script src="../js/request.js"></script>
	<script src="../../js/common.js"></script>
    <script type="text/javascript">
	window.$$=window.Zepto = Zepto;
	</script>
  </head>
  <body>
    <div class="page">
      <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" href="javascript:window.history.back();" data-transition='slide-out'>
          <span class="icon icon-left"></span>
          返回
        </a>
        <h1 class="title">保洁订购</h1>
      </header>

      <!-- 主体内容 -->
      <div class="D_content">
        <!-- 订单详情 -->
        <div class="clean_detail--line">
          <div class="detail--img">
            <img id="logo" src="images/dailyClean/i-f7.png" alt="" />
          </div>
          <div class="detail--text">
            <p class="p1 esp2">日常保洁套餐 | 一个月四次日常保洁</p>
            <div class="detail--num cl">
              <span class="detail--num_text">三个月起订购</span>
              <div class="detail--num_block fr">
                <span class="change--num num--reduce reduce">-</span>
                <span class="last-num"><!-- 4 --></span>
                <span class="change--num num--add add">+</span>
              </div>
            </div>
          </div>
        </div>
		
        <!-- 对应面积的价格表 -->
        <div class="clean_detail--price">
        <p style="margin-left: 10px;">套餐价格标准</p>
          <ul class="cl" id="priceList">
           <!--  <li>50-80㎡168元/月</li>
            <li>50-80㎡168元/月</li>
            <li>50-80㎡168元/月</li>
            <li>50-80㎡168元/月</li> -->
          </ul>
          <p class="clean_detail--tips">首次体验的蓝居客将享受首月99元的优惠哦~</p>
        </div>

         <!-- 用户填写面积 -->
      <!--  <div class="clean_detail--area cl">
          <div class="area--left fl">
            房屋面积：
          </div>
          <div class="area--right fr">
            <div class="area_input--line">
              <input type="text" class="area--input" placeholder="请输入面积" />
              <button class="area--btn">确定</button>
            </div>
            <p class="area--tips">*请输入您的房屋面积，系统将为您计算套餐总额</p>
          </div>
        </div> -->
 <!-- 订单总额 -->
        <div class="order--price">
        
          &yen;<span id="order--amount">0</span>
        </div>
        <!-- 底部提交订单按钮 -->
        <div class="D_footer--block">
          <a href="javascript:;" class="add_order--btn">
            提交订单
          </a>
        </div>
       
      </div>
    </div>
    <script type="text/javascript">
    var serviceId = Request.queryString("serviceId");
    var path = "/LanJuPublic";
    var isFirst = true;
    var firstPrice;
    var serviceCount;
    $(function(){
    	queryServiceDetailById();
    	//queryUserSeerviceRel();
    	$(".add").click(function(){
    		$(".last-num").text(parseInt($(".last-num").text())+parseInt(serviceCount));
    		$("#priceList li").each(function(){
    			if($(this).hasClass("active")){
    				var getPrice = $(this).attr("value");
    				if(isFirst){//首次
    	    			total = getPrice*(parseInt($(".last-num").text())-1) + firstPrice;
    	    		}else{
    	    			total = parseInt($(".last-num").text())*getPrice;
    	    		}
    				$("#order--amount").text(total);
    			}
    		})
    		
    	})
    	
    	$(".reduce").click(function(){
    		if(parseInt($(".last-num").text())-parseInt(serviceCount)==0){
    			$$.toast("最少"+serviceCount+"个月起购")
    		}else{
    			$(".last-num").text(parseInt($(".last-num").text())-parseInt(serviceCount));
    			$("#priceList li").each(function(){
        			if($(this).hasClass("active")){
        				var getPrice = $(this).attr("value");
        				if(isFirst){//首次
        	    			total = getPrice*(parseInt($(".last-num").text())-1) + firstPrice;
        	    		}else{
        	    			total = parseInt($(".last-num").text())*getPrice;
        	    		}
        				$("#order--amount").text(total);
        			}
        		})
    		}
    	})
    	
    	$("#priceList").on('click','li',function(){
    		$(this).css("background-color","#FF9900");
    		$(this).addClass("active");
    		$(this).siblings().removeClass("active");
    		$(this).siblings().css("background-color","#fff");
    		var getPrice = $(this).attr("value");
    		if(isFirst){//首次
    			total = getPrice*(parseInt($(".last-num").text())-1) + firstPrice;
    		}else{
    			total = parseInt($(".last-num").text())*getPrice;
    		}
    		$("#order--amount").text(total);
    	})
    	
    	$(".add_order--btn").click(function(){
    		var i = 0 ;
    		$("#priceList li").each(function(){
    			if($(this).hasClass("active")){
    				i++
    			}
    		})
    		if(i != 0){
    			var months = $(".last-num").text();
    			var price = $("#order--amount").text();
    			window.location.href="../service/orderConfirm.html?serviceId="+serviceId+"&chargesType=1&months="+months+"&price="+price;
    		}else{
    			$$.toast("请选择对应的套餐价格")
    		}
    		
    	})
	})
	
	function queryServiceDetailById(){
	$$.showPreloader("加载中");
	$.ajax({
		url : path+"/service/queryServiceDetailById.do",
		data : {
			serviceId: serviceId
		},
		type : "POST",
		dataType : 'json',
		cache : false,
		success : function(ret){
			$$.hidePreloader();
			if(ret.imgList && ret.imgList.length>0){
				$.each(ret.imgList,function(i,n){
					if(n.type == 1){	
						//$("#logo").attr("src",""+n.imgUrl+"");
					}
				});
			}
			if(ret.serverList && ret.serverList.length>0){
				$.each(ret.serverList,function(i,n){
					$(".last-num").text(n.serviceCount);
					serviceCount = n.serviceCount;
				});
			}
			if(ret.priceList && ret.priceList.length>0){
				var html = "";
				$.each(ret.priceList,function(i,n){
					if(n.type == 1){	
						$(".clean_detail--tips").text("首次体验的蓝居客将享受首月"+n.price+"元的优惠哦~");
						firstPrice = n.price;
					}
					else if(n.type == 2){
						html+="<li value='"+n.price+"'>"+n.priceName+"㎡"+n.price+"元/月</li>";
					}
				});
				$("#priceList").html(html);
			}
		},
		error: function(){
			$$.hidePreloader();
			$$.toast("加载出错");
		}
	});
}
    
    function queryUserSeerviceRel(){
    	$.ajax({
    		url : path+"/service/queryUserSeerviceRel.do",
    		data : {
    			serviceId: serviceId
    		},
    		type : "POST",
    		dataType : 'json',
    		cache : false,
    		success : function(ret){
    			if(ret.list == 0){
    				isFirst = true;
    			}
    		}
    	})
    }
    </script>
  </body>
</html>